<template>
  <div>
    <el-table :data="stroedata.list" stripe style="width: 100%">
      <el-table-column prop="storeName" label="商家名称" width="180">
      </el-table-column>
      <el-table-column prop="storePhone" label="商家电话" width="180">
      </el-table-column>
      <el-table-column prop="address" label="商家logo">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.storeLogo"
            fit="contain"
            :preview-src-list="[scope.row.storeLogo]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="商家类型">
        <template #default="scope">
          <el-tag v-if="(scope.row.storeType = 1)">汽车4s店</el-tag>
          <el-tag v-else-if="(scope.row.storeType = 2)">汽车修理厂</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="masterName" label="负责人名称"> </el-table-column>
      <el-table-column prop="masterPhone" label="负责人电话"> </el-table-column>
      <el-table-column label="商家地址">
        <template #default="scope">
          {{
            scope.row.province +
            scope.row.city +
            scope.row.town +
            scope.row.address
          }}
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="申请时间"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" size="small" @click="toAudit(scope.row)"
            >审 核</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 审核界面 -->
    <el-dialog
      title="商家审核"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      center
    >
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template slot="label"> 商家名称 </template>
          {{ audOrder.storeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商家类型 </template>
          <el-tag v-if="(audOrder.storeType = 1)">汽车4s店</el-tag>
          <el-tag v-else-if="(audOrder.storeType = 2)">汽车修理厂</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商家logo </template>
          <el-image
            style="width: 100px; height: 100px"
            :src="audOrder.storeLogo"
            fit="contain"
            :preview-src-list="[audOrder.storeLogo]"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商家地址 </template>
          {{
            audOrder.province + audOrder.city + audOrder.town + audOrder.address
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商家电话 </template>
          {{ audOrder.storePhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商家门头 </template>
          <el-image
            v-for="(item, index) in audOrder.frontDoor"
            :key="index"
            style="width: 100px; height: 100px"
            :src="item"
            fit="contain"
            :preview-src-list="audOrder.frontDoor"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 营业执照 </template>
          <el-image
            v-for="(item, index) in audOrder.bizLicense"
            :key="index"
            style="width: 100px; height: 100px"
            :src="item"
            fit="contain"
            :preview-src-list="audOrder.bizLicense"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 负责人姓名 </template>
          {{ audOrder.masterName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 负责人电话 </template>
          {{ audOrder.masterPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 业务员姓名 </template>
          {{ audOrder.serveName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 业务员电话 </template>
          {{ audOrder.servePhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请时间 </template>
          {{ audOrder.updateDate }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="danger"
          >驳 回</el-button
        >
        <el-button type="primary" @click="dialogVisible = false"
          >通 过</el-button
        >
      </span>
    </el-dialog>
    <!-- 页面条目 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageNum"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stroedata: {},
      query: {
        pageNum: 1,
        pageSize: 10,
        total: "",
      },
      dialogVisible: false,
      audOrder: {},
    };
  },
  mounted() {
    this.auditStoreData();
  },
  methods: {
    auditStoreData: async function () {
      let res = await this.$http.get("/merchant/getVerifyMerchants", {
        params: { pageNum: this.query.pageNum, pageSize: this.query.pageSize },
      });
      this.stroedata = res.data.object;
      this.query.total = res.data.object.total;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    toAudit(audOrder) {
      this.dialogVisible = true;
      this.audOrder = audOrder;
    },
    // 分页功能
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.auditStoreData();
    },
    handleCurrentChange(pageNum) {
      this.query.pageNum = pageNum;
      this.auditStoreData();
    },
  },
};
</script>

<style lang="scss" scoped></style>
